<template>
 
    <div class="text-center">选择日期</div>
    <el-divider />
   
      <el-card class="date">
        <div class="left-side">
          <el-date-picker-panel v-model="value" :border="false" />
        </div>
        <div class="left-side">
          <el-form
          style="max-width: 600px"
          :model="sizeForm"
          label-width="auto"
          :label-position="labelPosition"
          :size="size"
  >
    <el-form-item label="手机号：">
      <el-input v-model="sizeForm.name" />
    </el-form-item>


    <el-form-item label="性别：">
      <el-select
        v-model="sizeForm.region"
        placeholder="please select your sex"
      >
        <el-option label="女" value="shanghai" />
        <el-option label="男" value="beijing" />
      </el-select>
    </el-form-item>


    



    <el-form-item label="人群：">
      <el-radio-group v-model="sizeForm.type">  
        <el-radio border :value="item.id" v-for="item in list1" :key="item.id" style="margin-top: 3px;" @click="Popup(item.name)">
      {{ item.name }}
        </el-radio>  
      </el-radio-group>
    </el-form-item>


    <el-form-item label="场次：">
      <el-radio-group v-model="sizeForm.resource">  
        <el-radio border :value="item.id" v-for="item in list" :key="item.id">
      {{ item.name }}
        </el-radio>  
      </el-radio-group>
    </el-form-item>

    <el-form-item label="价格：">
      <el-input v-model="sizeForm.price" />
    </el-form-item>


    <el-form-item>
      <el-button type="primary" @click="onSubmit">确认</el-button>
      <el-button>返回</el-button>
    </el-form-item>
  </el-form>


        </div>
        
      </el-card>
   
  
</template>

<script lang="ts" setup>
import { reactive,ref } from 'vue'
const value = ref()


import type { ComponentSize, FormProps } from 'element-plus'
import axios from '@/http/request'

const size = ref<ComponentSize>('default')
const labelPosition = ref<FormProps['labelPosition']>('right')

const sizeForm = reactive({
  name: '',
  price:'',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

function onSubmit() {
  console.log('submit!')
}

const list1 = ref([
  { id: 1, name: '成人票' },
  { id: 2, name: '学生票' },
  { id: 3, name: '套票' },
  { id: 4, name: '夜爬票' }
])


const list = ref([
  { id: 1, name: '08：00' },
  { id: 2, name: '14：00' }
])

let attraction_id = ref(1)//获取前一个页面的attraction_id
async function Popup(name:string) {
  console.log(attraction_id.value)
  const res = await axios.get(`/ticket/${attraction_id.value}/${name}`)
  sizeForm.price = res.data
}



</script>

<style scoped>
.date-picker--flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.divider {
  height: auto;
}
.el-radio-group {
  margin-right: 12px;
}
.text-center {
  font-size: 20px;
  text-align: center;
  margin-top: 17px;
}
.date {
  width: 1100px;
  height:400px;
  margin-top: 60px;
  margin-left: 300px;
}
.left-side {
  width:50%; 
  float: left;
}

.right-side {
  text-align: center;
  display: grid;
  place-items: center; 
  float: right;
}
</style>
